<template>
    <div class="bao">
        <div class="icon">
            <van-icon name="arrow-left" size="25" @click="left" />
        </div>
        <div class="box4">
            <div class="imgs">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp476412505.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672406516&t=33f7edbfbb9be72b9a57d21dd2ea0b8b"
                    alt="">
                <ul>
                    <li>
                        <p>丹麦人</p>
                    </li>
                    <li></li>
                    <li>出版社</li>
                    <li>id</li>
                    <li>新</li>
                    <li>￥<b>15.00</b><span>58.00</span>
                    </li>
                </ul>
            </div>
            <div class="debg">
                <div class="Bg"></div>
            </div>
            <b @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开全部' }}</b>
        </div>
        <div class="Introduce">
        </div>
    </div>
    <div>
        <van-sticky>
            <van-dropdown-menu active-color="#ee0a24">
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2">
                    <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex"
                        :items="items" />
                </van-dropdown-item>
                <van-dropdown-item v-model="value3" :options="option3" @change="value3" />
            </van-dropdown-menu>
        </van-sticky>

    </div>
    <div class="list">
        <ul>
            <li>
                <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="">
            </li>
            <li>
                <p> 绯雨格格格</p>
                <b>￥18:00 <span>运费￥0.0</span></b>
            </li>
            <li>
                <p>北京大学</p>
            </li>
            <van-icon name="shopping-cart-o" size="30" color="#cabaa1" />
        </ul>
        <div class="stop">
            <router-link to="/stop">
                <van-icon name="shopping-cart-o" size="30" color="#cabaa1">
                </van-icon>
            </router-link>
            <div class="debg"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getSale } from './api';
import { showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const isOpen = ref(false)
//添加成功提示
const count = () => {
    showToast({
        icon: 'success',
    });
}
//后退
const left = () => {
    router.go(-1)
}
//渲染数据
console.log(route.params.idbook, 'router')
const setSale = () => {
    getSale(route.params.idbook).then(res => {
        console.log(res, '详情')
    })
}
//学校选择
const activeId = ref(1);
const activeIndex = ref(0);
const items = [
    {
        text: '常用',
        children: [
            { text: '所有学校', id: 1 },
        ],
    },
    {
        text: '浙江',
        children: [
            { text: '杭州', id: 1 },
            { text: '温州', id: 2 },
            { text: '宁波', id: 3 },
        ],
    },
    {
        text: '江苏',
        children: [
            { text: '南京', id: 4 },
            { text: '无锡', id: 5 },
            { text: '徐州', id: 6 },
        ],
    },
];
//下拉框
const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a')
const option1 = [
    { text: '全部卖家', value: 0 },
    { text: '个人卖家', value: 1 },
    { text: '书店卖家', value: 2 },
    { text: '我的关注', value: 3 },
];
const option2 = [
    { text: '所有学校', value: 'a' },

];
const option3 = [
    { text: '综合排序', value: 'a' },
    { text: '价格从高到底', value: 'b' },
    { text: '价格从底到高', value: 'c' },
    { text: '成色从新到旧', value: 'd' },
];
onMounted(() => {
    setSale()
})
</script>
<style lang="scss" scoped>
.stop {
    width: 50px;
    height: 50px;
    background-color: #f5f5f5;
    text-align: center;
    border-radius: 50%;
    line-height: 60px;
    position: fixed;
    right: 10px;
    bottom: 63px;
}

.list ul {
    // width: 300px;
    height: 100px;
    background-color: rgb(225, 171, 101);
    display: flex;
    margin-top: 10px;
    position: relative;

    .van-badge__wrapper {
        position: absolute;
        top: 56px;
        right: 23px;
    }

    li:nth-of-type(2) {
        margin-left: 8px;

        p {
            margin-top: 10px;
        }

        b {
            display: inline-block;
            margin-top: 25px;
            color: #cabaa1;

            span {
                padding-left: 5px;
            }
        }
    }

    li:nth-of-type(3) {
        p {
            margin-left: 80px;
            margin-top: 10px;

        }
    }

    img {
        width: 80px;
        height: 90px;
        border-radius: 10px;
        margin: 5px;
    }
}

.foot {
    height: 300px;
    background: blanchedalmond;
}

.bao {
    overflow: auto;
}

.Introduce {
    background-color: antiquewhite;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //控制行树
    overflow: hidden;

    >div {
        margin: 20px 5px 0 5px;

        p {
            margin-top: 30px;
            text-align: center;
            margin-bottom: 20px;
        }
    }
}

.box4 {
    position: relative;
}

.imgs ul {
    color: #fff;
    position: absolute;
    z-index: 1;
    top: 63px;
    left: 200px;

    li {
        margin-top: 5px;
    }

    p {
        font-size: 30px;
        margin-bottom: 10px;
    }

    span {
        text-decoration: line-through;
        margin-left: 7px;
    }
}

.imgs {
    img {
        position: absolute;
        top: 59px;
        left: 42px;
        z-index: 1;
        width: 130px;
        height: 200px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }


}

.icon {
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: rgba(62, 53, 53, 0.263);
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    z-index: 1;
    position: absolute;
    left: 5px;
    top: 5px;
}


.Bg {
    height: 300px;
    // background-size: 100% 100%;
    backdrop-filter: blur(10px);
}
</style>
